<template>
	<view class="flex-col page">
		<view class="flex-col">
			<MyHeader title="消息"></MyHeader>
			<view class="flex-col list">
				<block v-for="(item, index) in items" :key="index">
					<view @click="goDetail(item,index)" class="flex-row justify-between self-stretch list-item">
						<view class="flex-row items-center group_2">
							<view class="flex-col justify-start items-start shrink-0 relative group_3">
								<image class="image_6" :src="item.imgUrl" />
								<view class="flex-col justify-start items-center text-wrapper pos" v-if="item.number">
									<text class="font">{{item.number}}</text>
								</view>
							</view>
							<text class="ml-10 font_2">{{item.name}}</text>
						</view>
						<!-- <text class="self-start font_3 text">{{item.newTime}}</text> -->
					</view>
				</block>
			</view>
		</view>
	</view>
	<!-- 底部自定义tabbar -->
	<!-- <myTabbar></myTabbar> -->
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
		computed,
		nextTick
	} from 'vue';
	import {
		getmessageCountListAPI
	} from '@/apis/message.js'
	import {
		useUserStore
	} from '@/store/useUserStore.js'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		isLoginAndGo
	} from '@/utils';
	// import {
	// 	useScollShowNav,
	// 	useCalendarAndState
	// } from '@/composables';
	const userStore = useUserStore()
	const items = ref([{
			name: '校园墙',
			imgUrl: 'https://bs-mini-program.oss-cn-hangzhou.aliyuncs.com/images/0/%E6%B6%88%E6%81%AF%E9%A1%B5%E5%9B%BE%E6%A0%87/%E6%A0%A1%E5%9B%AD%E5%A2%99.png',
			newTime: '昨天',
			module: 1,
			number: 0
		},
		{
			name: '拼车',
			imgUrl: 'https://bs-mini-program.oss-cn-hangzhou.aliyuncs.com/images/0/%E6%B6%88%E6%81%AF%E9%A1%B5%E5%9B%BE%E6%A0%87/%E6%8B%BC%E8%BD%A6.png',
			newTime: '昨天',
			module: 2,
			number: 0
		},
		// {name:'外卖',imgUrl:'/static/xiaoxi/外卖.jpg',newTime:'昨天'},
		{
			name: '兼职',
			imgUrl: 'https://bs-mini-program.oss-cn-hangzhou.aliyuncs.com/images/0/%E6%B6%88%E6%81%AF%E9%A1%B5%E5%9B%BE%E6%A0%87/%E5%85%BC%E8%81%8C.png',
			newTime: '昨天',
			module: 3,
			number: 0
		},
		{
			name: '商品交易',
			imgUrl: 'https://bs-mini-program.oss-cn-hangzhou.aliyuncs.com/images/0/%E6%B6%88%E6%81%AF%E9%A1%B5%E5%9B%BE%E6%A0%87/%E7%89%A9%E5%93%81%E4%BA%A4%E6%8D%A2.png',
			newTime: '昨天',
			module: 5,
			number: 0
		},
		{
			name: '帮忙',
			imgUrl: 'https://bs-mini-program.oss-cn-hangzhou.aliyuncs.com/images/0/%E6%B6%88%E6%81%AF%E9%A1%B5%E5%9B%BE%E6%A0%87/%E5%B8%AE%E5%BF%99.png',
			newTime: '昨天',
			module: 4,
			number: 0
		},
	])
	const goDetail = (item) => {
		console.log(item);
		const findItem = items.value.find(obj => obj.module == item.module)
		uni.navigateTo({
			url: '/pages/xiaoxi/xiaoxiList?module=' + item.module + '&xiaoxiMsg=' + findItem.name + '消息'
		})
	}
	onShow(async () => {
		// await isLoginAndGo('/pages/xiaoxi/xiaoxi')
		getMessageList()

	})
	const numbers = ref([])
	const getMessageList = async () => {
		const userId = uni.getStorageSync('userId')
		console.log(userId);
		if (!userId) {
			uni.navigateTo({
				url: '/otherpages/index/login/login?from=' + '/pages/xiaoxi/xiaoxi'
			})
			return
		}

		const res = await getmessageCountListAPI({
			userId: userStore.userInfo.id
		})
		numbers.value = res.data
		numbers.value.forEach((num) => {
			const item = items.value.find((item) => item.module == num.module);
			// console.log(item);
			if (item) {
				item.number = num.number; // 将 number 值赋给对应的对象
			}else{
				num.number=0
			}
		});
		// console.log(res);
	}
	// nextTick(()=>{÷
	getMessageList()
	// })÷
</script>

<style scoped lang="css">
	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.mt-284 {
		margin-top: 568rpx;
	}

	.ml-101 {
		margin-left: 202rpx;
	}

	.page {
		background-color: #f7f8fa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 0 12rpx 28rpx;
		background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 100%);
	}

	.group {
		padding: 34rpx 16rpx 40rpx;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.section_2 {
		padding: 12rpx 24rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		width: 174rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_5 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_3 {
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_4 {
		width: 34rpx;
		height: 34rpx;
	}

	.list {
		padding-top: 16rpx;
	}

	.list-item {
		padding: 20rpx 30rpx 0;
	}

	.group_2 {
		width: 212.96rpx;
	}

	.group_3 {
		padding-top: 12rpx;
		width: 96rpx;
	}

	.image_6 {
		border-radius: 12rpx;
		width: 84rpx;
		height: 84rpx;
	}

	.text-wrapper {
		padding: 8rpx 0;
		background-color: #f52f00;
		border-radius: 50%;
		width: 28rpx;
	}

	.pos {
		position: absolute;
		right: 0;
		top: 0;
	}

	.font {
		font-size: 20rpx;
		font-family: SourceHanSansCN;
		line-height: 14.66rpx;
		color: #ffffff;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		line-height: 22.1rpx;
		color: #999999;
	}

	.text {
		margin-top: 48rpx;
		line-height: 18.22rpx;
	}

	.font_2 {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 29.66rpx;
		color: #333333;
	}

	.section_4 {
		padding: 6rpx 0;
		filter: drop-shadow(0rpx -4rpx 8rpx #a1727214);
		background-color: #ffffff;
	}

	.equal-division-item {
		width: 48rpx;
		height: 48rpx;
	}

	.pos_2 {
		position: absolute;
		right: 336rpx;
		top: 0;
	}
</style>